<template>
  <Form>
    <FormItem label="群主|领导">
      <Select ref="lSelect" v-model="leaders" remote multiple filterable :remote-method="remoteLeaderMethod" :loading="loading">
        <Option v-for="(item, index) in  lItems" :value="item.id" :key="index">
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
          <span style="float: left">{{ item.username }}</span>
        </Option>
      </Select>
    </FormItem>
    <FormItem label="组员|下属">
      <Select ref="mSelect" v-model="members" remote multiple filterable :remote-method="remoteMemberMethod" :loading="loading">
        <Option v-for="item in  mItems" :value="item.id" :key="item.id">
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
          <span style="float: left">{{ item.username }}</span>
        </Option>
      </Select>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="onSubmit">确认</Button>
    </FormItem>
  </Form>
</template>
<script>
import {
  page
} from '@/api/admin/user/index'
import {
  getUsers,
  modifyUsers
} from '@/api/admin/group/index'
import { mapGetters } from 'vuex'
export default {
  props: {
    groupId: {
      default: '1'
    }
  },
  data () {
    return {
      lItems: [],
      mItems: [],
      leaders: [],
      members: [],
      list: [],
      loading: false,
      groupManager_btn_userManager: false
    }
  },
  created () {
    this.initUsers()
    this.groupManager_btn_userManager = this.elements['groupManager:btn_userManager']
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    remoteMemberMethod (query) {
      console.log(query)
      if (query !== '') {
        this.loading = true
        this.loading = false
        page({
          name: query,
          username: query
        }).then(response => {
          this.mItems = response.data.rows
          this.total = response.data.total
          this.loading = false
        })
      } else {
        this.mItems = []
      }
    },
    remoteLeaderMethod (query) {
      console.log('query:' + query)
      if (query !== '') {
        this.loading = true
        this.loading = false
        page({
          name: query,
          username: query
        }).then(response => {
          this.lItems = response.data.rows
          this.total = response.data.total
          this.loading = false
        })
      } else {
        this.lItems = []
      }
    },
    onSubmit () {
      const vals = {}
      if (this.members.length > 0) vals.members = this.members.join()
      if (this.leaders.length > 0) vals.leaders = this.leaders.join()
      modifyUsers(this.groupId, vals).then(() => {
        this.$emit('closeUserDialog')
        this.$Notice.success({
          title: '成功',
          message: '保存成功'
        })
      })
    },
    initUsers () {
      // this.$refs.mSelect.preventRemoteCall = false
      // this.$refs.lSelect.preventRemoteCall = false
      getUsers(this.groupId).then(response => {
        this.lItems = response.data.leaders
        this.mItems = response.data.members
        const mems = []
        const leas = []
        for (let i = 0; i < response.data.members.length; i++) {
          mems.push(response.data.members[i].id)
        }
        for (let i = 0; i < response.data.leaders.length; i++) {
          leas.push(response.data.leaders[i].id)
        }
        this.members = mems
        this.leaders = leas
        // console.log(this.leaders)
        // console.log(this.lItems)
        // this.$refs.mSelect.preventRemoteCall = true
        // this.$refs.lSelect.preventRemoteCall = true
      })
    }
  }
}
</script>
